<template>
  <el-container id="index">
    <el-main id="main">
      <div id="box">
        <h1 style="margin-bottom: 10px; font-size: 35px">微博评论情感趋向分析</h1>
        <el-input placeholder="请输入搜索内容" v-model="inputValue" class="input-with-select">
          <template slot="prepend"></template>
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
        <div id="list">
          <div id="content">
            <div class="item" :style="itemClass" v-for="(item, i) in pageData" :key="i">
              <div>
                <svg class="icon"
                     style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
                     viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2149">
                  <path
                    d="M748.854303 285.758061a31.030303 31.030303 0 0 0-22.434909-9.619394h-0.03103a31.030303 31.030303 0 0 0-22.49697 9.681454c-0.99297 1.05503-19.176727 20.293818-44.900849 52.689455-92.066909-171.566545-215.319273-295.842909-220.935757-301.490424a31.030303 31.030303 0 0 0-43.876849 0C381.145212 50.051879 74.78303 360.044606 74.78303 679.501576c0 188.167758 153.134545 341.271273 341.333334 341.271272h310.30303c136.874667 0 248.211394-115.991273 248.211394-258.544484 0-237.226667-216.560485-466.819879-225.776485-476.470303"
                    fill="#EEAF4B" p-id="2150"></path>
                  <path
                    d="M648.936727 927.495758h-190.122666c-70.283636 0-132.716606-58.616242-135.602425-130.420364-4.344242-107.582061 76.179394-216.839758 115.122425-263.13697a26.561939 26.561939 0 0 1 40.928969 0.031031c26.313697 31.371636 71.68 91.632485 96.938667 160.643878a504.86303 504.86303 0 0 1 51.944727-76.613818 26.624 26.624 0 0 1 41.487515-0.155151c32.457697 39.625697 91.384242 123.438545 87.784728 205.88606-2.513455 57.157818-52.534303 103.765333-108.48194 103.765334"
                    fill="#E48130" p-id="2151"></path>
                </svg>
                <el-link :underline="false" @click="toHot" class="font">{{item}}</el-link>
              </div>
            </div>
          </div>
          <el-pagination
            id="pagination"
            layout="prev, pager, next"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :total="50">
          </el-pagination>
        </div>
      </div>
    </el-main>
    <el-dialog width="35%" title="情感分析结果" :visible.sync="dialogFormVisible">
      <!-- 饼状图 -->
      <div id="chart" style="width: 600px;height:400px;"></div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
  import * as echarts from 'echarts'

  export default {
    name: 'Index',
    data() {
      return {
        inputValue: '',
        itemClass: '',
        pageData: ['12312312313123123123123', '1231312312vfnivfvfvnif', '3123123123123123123', '312312312312312312321312'],
        currentPage: 1,
        dialogFormVisible: false,
        myChart: null
      }
    },
    mounted() {
      // 设置box的宽度
      let box = document.getElementById('box')
      let index = document.getElementById('main')
      let mainWidth = index.offsetWidth
      console.log(mainWidth)
      box.style.width = (mainWidth / 4) + 'px'

      // 设置list内容高度
      let list = document.getElementById('list')
      let pagination = document.getElementById('pagination')
      let content = document.getElementById('content')
      content.style.height = list.offsetHeight - pagination.offsetHeight + 'px'

      // 设置item高度，每页十条
      let iH = content.offsetHeight / 10
      this.itemClass += 'height: ' + iH + 'px;'
    },
    methods: {
      toHot: function () {

      },
      handleCurrentChange: function (val) {

      },
      search: function () {
        this.dialogFormVisible = true
        // 绘制饼状图
        let that = this
        setTimeout(function () {
          if (that.myChart == null){
            that.myChart = echarts.init(document.getElementById('chart'))
          }
          that.myChart.setOption({
            title: {
              text: 'ECharts'
            },
            tooltip: {},
            series: [
              {
                type: 'pie',
                data: [
                  {
                    value: 335,
                    name: '负面情感'
                  },
                  {
                    value: 234,
                    name: '正面词语'
                  }
                ]
              }
            ]
          })
        }, 1)
        console.log(this.myChart)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #index {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  #main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  #box {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #list {
    height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: larger;
  }

  .font {
    font-size: larger;
  }
</style>
